<template>
	<view class="tabs-scroll flex flex-space-between">
		<view class="flex flex-center font32 color-b3 flex-column" v-for="(item, index) in list" :key="index"
			:class="[tabIndex == item.value ? 'active':'']" @click="handlerTab(item.value)">
			{{ item.label }}
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const emits = defineEmits(["change"]);
	const tabIndex = ref(1)
	const props = defineProps({
		list: {
			type: [Object, Array],
			default: []
		}
	})

	function handlerTab(e) {
		tabIndex.value = e;
		emits("change", tabIndex.value);
	}
</script>

<style lang="scss" scoped>
	.tabs-scroll {
		overflow-x: scroll;
		padding: 16rpx 30rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;

		.active {
			font-weight: 500;
			color: #3FA897;
		}

		.active::after {
			width: 40rpx;
			height: 6rpx;
			background: #3FA897;
			border-radius: 3rpx;
			content: '';
			position: absolute;
			bottom: 0;
		}
	}
</style>
